<template>
  <div class="celue">
    <el-card shadow="always">
      策略下发 / 策略管理
    </el-card>
    <br>
    <el-card shadow="always">
      区域:<el-select  placeholder="请选择">
        <el-option label="昌平数据中心" value="昌平数据中心"> </el-option>
        <el-option label="东直门数据中心" value="东直门数据中心"> </el-option>
        <el-option label="克拉玛依数据中心" value="克拉玛依数据中心"> </el-option>
        <el-option label="吉林数据中心" value="吉林数据中心"> </el-option>
      </el-select>  
      链路:<el-select  placeholder="请选择">
        <el-option label="链路一" value="链路一"> </el-option>
        <el-option label="链路二" value="链路二"> </el-option>
        <el-option label="链路三" value="链路三"> </el-option>
        <el-option label="链路四" value="链路四"> </el-option>
      </el-select>

      <br>
      <br>
      策略名称:<el-input style="width: 150px"></el-input>
      状态:<el-select  style="width: 150px" placeholder="请选择">
        <el-option label="在线" value="在线"> </el-option>
        <el-option label="待下发-新增" value="待下发-新增"> </el-option>
        <el-option label="待下发-离线" value="待下发-离线"> </el-option>
        <el-option label="聚合" value="聚合"> </el-option>
      </el-select>
      重点策略:<el-select  style="width: 150px" placeholder="请选择">
        <el-option label="链路一" value="链路一"> </el-option>
        <el-option label="链路二" value="链路二"> </el-option>
        <el-option label="链路三" value="链路三"> </el-option>
        <el-option label="链路四" value="链路四"> </el-option>
      </el-select>
      动作:<el-select  style="width: 150px" placeholder="请选择">
        <el-option label="链路一" value="链路一"> </el-option>
        <el-option label="链路二" value="链路二"> </el-option>
        <el-option label="链路三" value="链路三"> </el-option>
        <el-option label="链路四" value="链路四"> </el-option>
      </el-select>
      源地址:<el-input style="width: 150px"></el-input>
      目的地址: <el-input style="width: 150px"></el-input>
      来源: <el-input style="width: 150px"></el-input>
      <el-button>查询</el-button>

      <br>
      <br>
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
        <el-radio-button label="代理">代理</el-radio-button>
        <el-radio-button label="边界防火墙">边界防火墙</el-radio-button>
        <el-radio-button label="核心防火墙">核心防火墙</el-radio-button>
        <el-radio-button label="链路负载">链路负载</el-radio-button>
        <!-- <el-radio-button label="应用负载">应用负载</el-radio-button> -->
      </el-radio-group>
    </el-card>
    <br>
    <el-button type="primary" v-if="tabPosition == '代理'" @click="dialogVisible1 = true">新增--代理</el-button>
    <el-button type="primary" v-if="tabPosition == '边界防火墙'" @click="dialogVisible2 = true">新增</el-button>
    <el-button type="primary" v-if="tabPosition == '核心防火墙'" @click="dialogVisible2 = true, title='新增'">新增</el-button>


    <el-button type="primary" v-if="tabPosition == '边界防火墙' || tabPosition == '核心防火墙'" @click="asdModel = true">克隆</el-button>
    <el-button type="primary" v-if="tabPosition == '边界防火墙' || tabPosition == '核心防火墙'" >调整位置</el-button>


    <el-button type="primary" v-if="tabPosition == '链路负载'" @click="dialogVisible4 = true">新增</el-button>
    <!-- <el-button type="primary" v-if="tabPosition == '链路负载'" @click="dialogVisible44 = true">新增--链路负载snat</el-button> -->
    <!-- <el-button type="primary" @click="dialogVisible5 = true">新增--应用负载、</el-button> -->
    <el-button type="primary" @click="dialogVisible11 = true">优化</el-button>




    <br>
    <br>
    <!-- 代理 -->
    <el-table
      v-if="tabPosition == '代理'"
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="aaa"
        label=""
        width="70">
        <template  slot-scope="scope">
          <el-tag type="success" v-if="scope.row.aaa == 'gray'"> &nbsp;&nbsp;&nbsp;</el-tag>
          <el-tag type="info" v-if="scope.row.aaa == 'red'"> &nbsp;&nbsp;&nbsp;</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="aaa000"
        label="开通IP"
        width="220">
      </el-table-column>

      <el-table-column
        prop="aaa111"
        label="状态"
        width="180">
      </el-table-column>

      <el-table-column
        prop="aaa222"
        label="使用人"
        width="180">
      </el-table-column>
      
      <el-table-column
        prop="aaa333"
        label="所属部门"
        width="180">
      </el-table-column>

      <el-table-column
        prop="aaa444"
        label="备注"
        width="180">
      </el-table-column>
      
      
      <el-table-column  align="center"  label="操作">
        <template slot-scope="scope">
          <el-button type="text"  @click="dialogVisible = true">详情(聚合才显示详情)</el-button>
          <el-button type="text" v-if="scope.row.aaa111 == '待下发-新增' || scope.row.aaa111 == '待下发-离线'">下发</el-button>
          <el-button type="text" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 代理详情 -->
    <el-dialog
      title="详情(只显示在线的单个IP)"
      :visible.sync="dialogVisible"
      width="70%">
        输入IP: <el-input style="width: 150px;" placeholder="输入IP查询"></el-input>
        <el-table
            :data="tableData"
            style="width: 100%">

            <el-table-column
              prop="aaa000"
              label="开通IP"
              width="180">
            </el-table-column>

            <el-table-column
              prop="aaa111"
              label="状态"
              width="180">
            </el-table-column>

            <el-table-column
              prop="aaa222"
              label="使用人"
              width="180">
            </el-table-column>
            
            <el-table-column
              prop="aaa333"
              label="所属部门"
              width="180">
            </el-table-column>

            <el-table-column
              prop="aaa444"
              label="备注"
              width="180">
            </el-table-column>
        </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    
    <!-- 新增-代理 -->
    <el-dialog
      title="新增-代理"
      :visible.sync="dialogVisible1"
      width="30%">
        <div style="width: 80px; display: inline-block; text-align: left">IP: </div>
        <el-input style="width: 150px;" placeholder="输入IP查询"></el-input>
        <br>
        <br>
        <div style="width: 80px; display: inline-block; text-align: left">使用人: </div>
        <el-input style="width: 150px;" placeholder="输入IP查询"></el-input>
        <br>
        <br>
        <div style="width: 80px; display: inline-block; text-align: left">所属部门: </div>
        <el-input style="width: 150px;" placeholder="输入IP查询"></el-input>
        <br>
        <br>
        <div style="width: 80px; display: inline-block; text-align: left">备注信息: </div>
        <el-input style="width: 150px;" placeholder="输入IP查询"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增-边界防火墙、核心防火墙 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible2"
      width="50%">
        <!-- <img src="./imgs/m1.png" style="width: 100%;" alt=""> -->
        <!-- <h2>基本信息</h2> -->
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">策略名称: </div>
          <el-input style="width: 200px"></el-input>
        </el-col>
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">策略类型: </div>
          <el-select v-model="aaasss1" style="width: 200px">
            <el-option label="本地" value="本地"> </el-option>
            <el-option label="本地特殊" value="本地特殊"> </el-option>
            <el-option label="全局" value="全局"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">动作: </div>
          <el-select v-model="aaasss1" style="width: 200px">
            <el-option label="" value=""> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">状态: </div>
          <el-select v-model="aaasss1" style="width: 200px">
            <el-option label="开启" value="开启"> </el-option>
            <el-option label="关闭" value="关闭"> </el-option>
          </el-select>
        </el-col>

        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">源地址: </div>
          <el-input style="width: 200px"></el-input>
        </el-col>
         <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">源端口: </div>
          <el-input style="width: 200px"></el-input>
        </el-col>
         <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">目的地址: </div>
          <el-input style="width: 200px"></el-input>
        </el-col>
         <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">服务: </div>
          <el-input style="width: 200px"></el-input>
        </el-col>
        


        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">源区域: </div>
          <el-input style="width: 200px"></el-input>
        </el-col>
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">目的区域: </div>
          <el-input style="width: 200px"></el-input>
        </el-col>
        <br>
        <!-- <h2>平台信息</h2> -->
        <br>
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">重点标示: </div>
          <el-select v-model="aaasss1" style="width: 200px">
            <el-option label="开启" value="开启"> </el-option>
            <el-option label="关闭" value="关闭"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">备注: </div>
          <el-input style="width: 500px"></el-input>
        </el-col>
        <h2 style="color: blue" @click="displayBox = !displayBox" >展开高级部分</h2>
        <div v-if="displayBox">
            <el-col :span="24">
              <div style="width: 110px; display: inline-block; text-align: left">长链接选项: </div>
              <el-select v-model="aaasss1" style="width: 200px">
                <el-option label="开启" value="开启"> </el-option>
                <el-option label="关闭" value="关闭"> </el-option>
              </el-select>
            </el-col>
            <el-col :span="24">
              <div style="width: 110px; display: inline-block; text-align: left">是否开启日志: </div>
              <el-select v-model="aaasss1" style="width: 200px">
                <el-option label="开启" value="开启"> </el-option>
                <el-option label="关闭" value="关闭"> </el-option>
              </el-select>
            </el-col>
            <el-col :span="24">
              <div style="width: 110px; display: inline-block; text-align: left">最大活动会话数: </div>
              <el-select v-model="aaasss1" style="width: 200px">
                <el-option label="开启" value="开启"> </el-option>
                <el-option label="关闭" value="关闭"> </el-option>
              </el-select>
            </el-col>
            <el-col :span="24">
              <div style="width: 110px; display: inline-block; text-align: left">会话时间: </div>
              <el-select v-model="aaasss1" style="width: 200px">
                <el-option label="开启" value="开启"> </el-option>
                <el-option label="关闭" value="关闭"> </el-option>
              </el-select>
            </el-col>
            <el-col :span="24">
              <div style="width: 110px; display: inline-block; text-align: left">策略描述: </div>
              <el-input  style="width: 400px"></el-input>
            </el-col>
        </div>
        
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
    
    <!-- 新增-链路负载 -->
    <el-dialog
      title="新增-链路负载dnat"
      :visible.sync="dialogVisible4"
      width="50%">
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">策略名称: </div>
          <el-input style="width: 200px"></el-input>
        </el-col>
        
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">状态:  </div>
          <el-select v-model="aaasss1" style="width: 200px">
            <el-option label="开启" value="开启"> </el-option>
            <el-option label="关闭" value="关闭"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24"> 
          <div style="width: 110px; display: inline-block; text-align: left">IP类型: </div>
          <el-select  v-model="aaasss2" style="width: 200px">
            <el-option label="IPv4" value="IPv4"> </el-option>
            <el-option label="IPv6" value="IPv6"> </el-option>
          </el-select>
        </el-col>
        
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">公网访问者IP:  </div>
            <el-radio v-model="radio1" label="111">所有IP</el-radio>
            <el-radio v-model="radio2" label="222">指定IP</el-radio>
            <el-input  style="width: 200px"></el-input>
        </el-col>

        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">应用internetIP:  </div>
            <el-radio v-model="radio1" label="111">所有IP</el-radio>
            <el-radio v-model="radio2" label="222">指定IP</el-radio>
            <el-input  style="width: 200px"></el-input>
        </el-col>

        <el-col :span="24"> 
          <div style="width: 110px; display: inline-block; text-align: left">映射类型: </div>
          <el-select  v-model="aaasss222" style="width: 200px">
            <el-option label="dnat" value="dnat"> </el-option>
            <el-option label="snat" value="snat"> </el-option>
          </el-select>
        </el-col>

        <el-col :span="24"> 
          <div style="width: 110px; display: inline-block; text-align: left">入接口:  </div>
          <el-radio v-model="radio1" label="111">所有链路</el-radio>
          <el-radio v-model="radio2" label="222">指定链路</el-radio>
          WAN/LAN: 
          <el-select  v-model="aaasss3" style="width: 200px">
            <el-option label="选择1" value="选择1"> </el-option>
            <el-option label="选择2" value="选择2"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24" v-if="aaasss222 == 'snat'"> 
          <div style="width: 110px; display: inline-block; text-align: left">出接口:  </div>
          <el-radio v-model="radio1" label="111">所有链路</el-radio>
          <el-radio v-model="radio2" label="222">指定链路</el-radio>
          WAN/LAN: 
          <el-select  v-model="aaasss3" style="width: 200px">
            <el-option label="选择1" value="选择1"> </el-option>
            <el-option label="选择2" value="选择2"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24"> 
          <div style="width: 110px; display: inline-block; text-align: left">应用DMZIP:   </div>
          <el-input style="width: 200px"></el-input> </el-col>
        <!-- <el-col :span="24"> 
          <div style="width: 110px; display: inline-block; text-align: left">应用DMZ服务:   </div>
          <el-input style="width: 200px"></el-input> </el-col> -->
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">是否开启ICMP:   </div>
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-col>
        <el-col :span="24" @change="checked88 == false"> 
          <el-checkbox v-model="checked88" >ALL</el-checkbox>
        </el-col>
        <el-col :span="24"> 
          <el-checkbox v-model="checked99" :disabled="checked88 == true">TCP</el-checkbox>
          源端口: <el-input style="width: 110px" :disabled="checked88 == true"></el-input>
          目的端口: <el-input style="width: 110px" :disabled="checked88 == true"></el-input>
        </el-col>
        <el-col :span="24" > 
          <el-checkbox v-model="checked100" :disabled="checked88 == true">UDP</el-checkbox>
          源端口: <el-input style="width: 110px" :disabled="checked88 == true"></el-input>
          目的端口: <el-input style="width: 110px" :disabled="checked88 == true"></el-input> 
        </el-col>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible4 = false">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 克隆 -->
    <el-dialog
      title="克隆"
      :visible.sync="asdModel"
      width="40%">
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">目的区域: </div>
          <el-select  style="width: 200px">
            <el-option label="开启" value="开启"> </el-option>
            <el-option label="关闭" value="关闭"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="24">
          <div style="width: 110px; display: inline-block; text-align: left">目的链路: </div>
          <el-select  style="width: 200px">
            <el-option label="开启" value="开启"> </el-option>
            <el-option label="关闭" value="关闭"> </el-option>
          </el-select>
        </el-col>
      <span slot="footer" class="dialog-footer">
        <el-button @click="asdModel = false">取 消</el-button>
        <el-button type="primary" @click="asdModel = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 优化 -->
    <el-dialog
      title="优化"
      :visible.sync="dialogVisible11"
      width="70%">
        <el-table
        :data="tableDataFYH"
        style="width: 100%">
        
        <el-table-column
          prop="b1"
          label="序号" >
        </el-table-column>
        <el-table-column
          prop="b2"
          label="优化内容" >
        </el-table-column>
        <el-table-column
          prop="b4"
          label="优化动作" >
        </el-table-column>
        <el-table-column
          prop="b5"
          label="优化对象" >
        </el-table-column>
        <el-table-column
          prop="b6"
          label="优化结果" >
        </el-table-column>
      </el-table>
        
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible11 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible11 = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 防火墙-table -->
    <div v-if="tabPosition == '边界防火墙' || tabPosition == '核心防火墙'">
      <el-table
        :data="tableDataFHQ"
        highlight-current-row
        style="width: 100%">
        <el-table-column
          prop="sss"
          label=""
          width="70">
          <template  slot-scope="scope">
            <el-tag type="success" v-if="scope.row.sss == 'gray'"> &nbsp;&nbsp;&nbsp;</el-tag>
            <el-tag type="info" v-if="scope.row.sss == 'red'"> &nbsp;&nbsp;&nbsp;</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="a12"
          label="来源" >
        </el-table-column>

         <el-table-column
          prop="a15"
          label="策略类型" >
        </el-table-column>

        <el-table-column
          prop="a11"
          label="下发状态" >
        </el-table-column>

        <el-table-column
          prop="a1"
          label="策略名称" >
        </el-table-column>

        <el-table-column
          prop="a2"
          label="源地址" >
        </el-table-column>

        <el-table-column
          prop="a3"
          label="源端口" >
        </el-table-column>

        <el-table-column
          prop="a4"
          label="目的地址" >
        </el-table-column>

        <el-table-column
          prop="a6"
          label="服务" >
        </el-table-column>

        <el-table-column
          prop="a5"
          label="动作" >
        </el-table-column>
        

        <el-table-column
          prop="a7"
          label="状态" >
        </el-table-column>

        <el-table-column
          prop="a7"
          label="源区域" >
        </el-table-column>

        <el-table-column
          prop="a7"
          label="目的区域" >
        </el-table-column>

        <el-table-column
          prop="a7"
          label="重点标识" >
        </el-table-column>

        
        
        <el-table-column
          prop="a8"
          label="备注" >
        </el-table-column>

        <el-table-column width="220px" align="center" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text"  @click="dialogVisible2 = true, title='详情-防火墙'">详情</el-button>
            <el-button type="text"  @click="dialogVisible2 = true, title='修改-防火墙'">修改</el-button>
            <el-button type="text" >删除</el-button>
            <el-button type="text" >克隆</el-button>
            <el-button type="text" v-if="scope.row.a11 == '未下发'">下发</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 链路负载 -->
    <el-table
        v-if="tabPosition == '链路负载'"
        :data="tableDataLLFZ"
        style="width: 100%">
        <el-table-column
          prop="sss"
          label=""
          width="70">
          <template  slot-scope="scope">
            <el-tag type="success" v-if="scope.row.sss == 'gray'"> &nbsp;&nbsp;&nbsp;</el-tag>
            <el-tag type="info" v-if="scope.row.sss == 'red'"> &nbsp;&nbsp;&nbsp;</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="a1"
          label="序号" >
        </el-table-column>

         <el-table-column
          prop="a100"
          label="来源" >
        </el-table-column>

         <el-table-column
          prop="a2"
          label="策略名称" >
        </el-table-column>

        <el-table-column
          prop="a99"
          label="策略类型" >
        </el-table-column>

        <el-table-column
          prop="a999"
          label="位置序号" >
        </el-table-column>

         <el-table-column
          prop="a101"
          label="下发状态" >
        </el-table-column>
        
        <el-table-column
          prop="a3"
          label="匹配次数" >
        </el-table-column>

        <el-table-column
          prop="a444"
          label="出接口" >
        </el-table-column>

        <el-table-column
          prop="a4"
          label="入接口" >
        </el-table-column>

        <el-table-column
          prop="a4444"
          label="应用DMZIP" >
        </el-table-column>

        <el-table-column
          prop="a5"
          label="公网访问者IP" >
        </el-table-column>

        <el-table-column
          prop="a6"
          label="应用internetIP" >
        </el-table-column>

        <el-table-column
          prop="a7"
          label="协议类型" >
        </el-table-column>

        <el-table-column
          prop="a88"
          label="源端口范围" >
        </el-table-column>

        <el-table-column
          prop="a8"
          label="目的端口范围" >
        </el-table-column>

        <el-table-column
          prop="a9"
          label="转换规则" >
        </el-table-column>

        <el-table-column
          prop="a10"
          label="状态" >
        </el-table-column>

        <el-table-column
          prop="a11"
          label="重点策略" >
        </el-table-column>

        <!-- <el-table-column
          prop="a12"
          label="来源" >
        </el-table-column> -->

        <el-table-column
          prop="a14"
          label="描述信息" >
        </el-table-column>

        <el-table-column width="220px" align="center" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text"  @click="dialogVisible4 = true">查看</el-button>
            <el-button type="text"  @click="dialogVisible4 = true">修改</el-button>
            <el-button type="text"  >删除</el-button>
            <el-button type="text"  v-if="scope.row.a101 == '未下发' ">下发</el-button>
            

          </template>
        </el-table-column>
    </el-table>

      <!-- 应用负载 -->
    <!-- <el-table
        v-if="tabPosition == '应用负载'"
        :data="tableDataYYFZ"
        style="width: 100%">

        <el-table-column
          prop="a1"
          label="序号" >
        </el-table-column>

         <el-table-column
          prop="a2"
          label="策略名称" >
        </el-table-column>
        
        <el-table-column
          prop="a3"
          label="匹配次数" >
        </el-table-column>

        <el-table-column
          prop="a4"
          label="入接口" >
        </el-table-column>

        <el-table-column
          prop="a5"
          label="源地址" >
        </el-table-column>

        <el-table-column
          prop="a6"
          label="目的地址" >
        </el-table-column>

        <el-table-column
          prop="a7"
          label="协议类型" >
        </el-table-column>

        <el-table-column
          prop="a8"
          label="目的端口范围" >
        </el-table-column>

        <el-table-column
          prop="a9"
          label="转换规则" >
        </el-table-column>

        <el-table-column
          prop="a10"
          label="状态" >
        </el-table-column>

        <el-table-column
          prop="a11"
          label="重点策略" >
        </el-table-column>

        <el-table-column
          prop="a12"
          label="动作" >
        </el-table-column>

        <el-table-column
          prop="a13"
          label="生成时间" >
        </el-table-column>

        <el-table-column width="220px" align="center" fixed="right" label="操作">
        </el-table-column>
    </el-table>
     -->

    <br>
    <br>
    <el-card shadow="always">
      备注事项:
      <br>
      <br>
      <h3>代理</h3>
      1、聚合 = 在线
      <br>
      <br>
      2、批量删除、批量下发
      <br>
      <br>
      3、删除聚合, 白名单和数据库一并删除
      <br>
      <br>
      4、详情分页展示、可按条件查询
      <br>
      <br>
      5、待下发的显示下发按钮并置顶显示、已下发不显示下发按钮、
      <br>
      <br>
      <h3>防火墙</h3>
      1、不同类型(代理、边界防火墙、核心防火墙、链路负载、应用负载、 对应的新增按钮不同)
      <br>
      <br>
      2、新增防火墙的时候, 非必填字段隐藏, 显示一个高级选项按钮, 点击按钮, 显示全部
      <br>
      <br>
      3、策略名称不可编辑
      <br>
      <br>
      4、下发后状态变为下发中, 整个页面不可操作
      <br>
      <br>
      5、表格省略部分....鼠标放上去显示具体信息
      <br>
      <br>
      6、地址对象、服务对象、时间对象 显示数据有层级关系
      <br>
      <br>
      <!-- 7、优化 -->
      <br>
      <br>
    </el-card>
    
    
  </div>
</template>

<style>
  .el-col{
    height: 60px;
  }
</style>

<script>
// import Sortable from 'sortablejs' // 表格拖动
export default {
  name: 'HelloWorld',
  data () {
    return {
      asdModel: false,
      displayBox: false,
      dialogVisible0: true,
      title: '新增',
      checked88: false,
      checked99: false,
      checked100: false,
      chack: '',
      aaasss1: '',
      aaasss2: '',
      aaasss222: '',
      aaasss3: '',
      disabled: false,
      checkList: ['ALL'],
      radio1: '333',
      radio2: '222',
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible4: false,
      dialogVisible44: false,
      dialogVisible5: false,
      dialogVisible8: false,
      dialogVisible11: false,
      tabPosition: '代理',
      // 代理
      tableData: [
        {
          aaa: 'red',
          aaa000: '1.1.1.1-1.1.1.4',
          aaa111: '在线',
          aaa222: '老张',
          aaa333: '产品',
        },
        {
          aaa: 'red',
          aaa000: '1.1.1.2',
          aaa111: '待下发-新增',
          aaa222: '老张',
          aaa333: '产品',
        },
        {
          aaa: 'gray',
          aaa000: '1.1.1.3',
          aaa111: '待下发-离线',
          aaa222: '老张',
          aaa333: '产品',
        },
        {
          aaa: 'gray',
          aaa000: '1.1.1.4',
          aaa111: '在线',
          aaa222: '老王',
          aaa333: '测试',
          aaa444: '备注...',
        }
        ,
        {
          aaa: 'gray',
          aaa000: '1.1.1.4',
          aaa111: '聚合',
          aaa222: '老李',
          aaa333: '测试',
          aaa444: '备注...',
        }
      ],
      // 防火墙
      tableDataFHQ: [
        {
          sss: 'gray',
          a1: '本地特殊-映射-HrC',
          a2: '张三: 1.1.1.1,王五: 1.1.1.2,老李:1.1.1.3 ',
          a3: 'any(实际数据是空)',
          a4: '202.106.0.20',
          a5: '放行',
          a6: 'Tcp80',
          a7: '',
          a8: '备注....',
          a11: '未下发',
          a12: '人工',
          a15: '本地特殊',
        },
        {
          sss: 'red',
          a1: '全局阻断IP',
          a2: '1.1.1.1',
          a3: 'any(实际数据是空)',
          a4: 'any',
          a5: '阻断',
          a6: 'any',
          a7: '',
          a11: '已下发',
          a12: 'soc',
          a8: '备注....',
          a15: '全局',
        },
        {
          sss: 'red',
          a1: '全局阻断服务',
          a2: 'any',
          a3: 'any(实际数据是空)',
          a4: 'any',
          a5: '阻断',
          a6: 'Tcp80',
          a7: '',
          a11: '已下发',
          a12: 'soc',
          a8: '备注....',
          a15: '全局',
        },
        {
          sss: 'gray',
          a1: 'ZT-OA',
          a2: '1.1.1.1',
          a3: 'any(实际数据是空)',
          a4: '202.106.0.20',
          a5: '放行',
          a6: 'Tcp80',
          a7: '',
          a8: '备注....',
          a11: '未下发',
          a12: '自服务单',
          a15: '全局'
        },
        {
          sss: 'gray',
          a1: '映射-Hr',
          a2: '1.1.1.1',
          a3: 'any(实际数据是空)',
          a4: '202.106.0.20',
          a5: '放行',
          a6: 'Tcp80',
          a7: '',
          a8: '备注....',
          a11: '未下发',
          a12: '人工',
          a15: '重点'
        },
        
        {
          sss: 'red',
          a1: 'OAB',
          a2: '1.1.1.1',
          a3: 'any(实际数据是空)',
          a4: '202.106.0.20',
          a5: '放行',
          a6: 'Tcp80',
          a7: '',
          a8: '备注....',
          a11: '未下发',
          a12: '自服务单',
          a15: '历史'
        },
        
      ],
      tableDataFYH: [
        {
          b1: '1',
          b2: '未引用对象',
          b3: '',
          b4: '删除多余对象,释放存储空间',
          b5: 'Tcp80',
          b6: '清除对象',
        },
        {
          b1: '2',
          b2: '未引用对象',
          b3: '',
          b4: '删除多余对象,释放存储空间',
          b5: '1.1.1.1',
          b6: '清除对象',
        }
        ,
        {
          b1: '3',
          b2: '策略状态为禁用',
          b3: '',
          b4: '删除多余对象,释放存储空间',
          b5: '1.1.1.1',
          b6: '清除对象',
        }
      ],
      // 链路负载
      tableDataLLFZ: [
        {
          sss:'gray',
          a1: '1',
          a2: 'xx业务-TCP',
          a3: '3',
          a4: 'vlan1',
          a444: 'vlan1',
          a5: 'all',
          a6: 'all',
          a7: 'TCP',
          a8: '8080-8090',
          a9: '',
          a10: '启用',
          a11: '是',
          a12: '人工',
          a13: '2020-03-03',
          a14: '描述..',
          a88: '0-65535',
          a100: '自服务单',
          a101: '未下发',
          a99: 'dnat',
          a999: '1',
          a4444: '1.1.1.1',
        },
        {
          sss:'gray',
          a1: '2',
          a2: 'xx业务-UDP',
          a3: '',
          a4: 'vlan2',
          a444: 'vlan2',
          a5: '',
          a6: '',
          a7: 'UDP',
          a8: '',
          a9: '',
          a10: '禁用',
          a11: '',
          a12: '自服务',
          a13: '2020-02-02',
          a14: '描述....',
          a88: '0-65535',
          a100: '人工',
          a101: '已下发',
          a99: 'snat',
          a999: '2',
          a4444: '1.1.1.2',
          
        },
        {
          sss:'red',
          a1: '3',
          a2: 'xx业务-ICMP',
          a3: '',
          a4: 'vlan3',
          a444: 'vlan3',
          a5: '',
          a6: '',
          a7: 'ICMP',
          a8: '',
          a9: '',
          a10: '禁用',
          a11: '',
          a12: '自服务',
          a13: '2020-02-02',
          a14: '描述....',
          a88: ' ',
          a100: '历史',
          a101: '已下发',
          a99: 'snat',
          a999: '3',
          a4444: '1.1.1.3',

        },
        {
          sss:'red',
          a1: '4',
          a2: 'xx业务-ALL',
          a3: '',
          a4: 'vlan3',
          a444: 'vlan3',
          a5: '',
          a6: '',
          a7: 'ALL',
          a8: '',
          a9: '',
          a10: '禁用',
          a11: '',
          a12: '自服务',
          a13: '2020-02-02',
          a14: '描述....',
          a88: ' ',
          a100: '历史',
          a101: '已下发',
          a99: 'snat',
          a999: '4',
          a4444: '1.1.1.4',

        }
      ],
      tableDataYYFZ: [
        {
          a1: '',
          a2: '',
          a3: '',
          a4: '',
          a5: '',
          a6: '',
          a7: '',
          a8: '',
          a9: '',
          a10: '',
          a11: '',
          a12: '',
          a13: '',
        }
      ]
    }
  },
  mounted () {
    // this.rowDrop()
    // this.columnDrop()
  },
  methods: {
    
    // //行拖拽
    // rowDrop() {
    //   const tbody = document.querySelector('.el-table__body-wrapper tbody')
    //   const _this = this
    //   Sortable.create(tbody, {
    //     onEnd({ newIndex, oldIndex }) {
    //       const currRow = _this.tableData.splice(oldIndex, 1)[0]
    //       _this.tableData.splice(newIndex, 0, currRow)
    //     }
    //   })
    // },
    // //列拖拽
    // columnDrop() {
    //   const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
    //   this.sortable = Sortable.create(wrapperTr, {
    //     animation: 180,
    //     delay: 0,
    //     onEnd: evt => {
    //       const oldItem = this.dropCol[evt.oldIndex]
    //       this.dropCol.splice(evt.oldIndex, 1)
    //       this.dropCol.splice(evt.newIndex, 0, oldItem)
    //     }
    //   })
    // }
    
  }
}
</script>

<style scoped>
</style>
